import React, { useRef } from 'react'
import Test from './Test'

export default function App() {
  // 创建ref
  // 旧: 不能给Ref对象的current设置默认值
  // const ref1 = React.createRef('默认值')
  // 新: 可以给Ref对象的current设置默认值
  const appRef = useRef('默认值')

  // ref重要内容回顾:
  // 1. ref和标签绑定,拿到的是标签的真实dom
  // 2. ref和类组件绑定,拿到的是类组件的实例
  // 3. ref和函数组件绑定,会报错(不能和函数组件绑定)
  // 如果函数组件使用了React.forwardRef,则函数组件上面就可以写ref了

  return (
    <div>
      App
      <hr />
      <Test ref={appRef}></Test>
      <button
        onClick={() => {
          //拿到Test组件中input的真实dom
          // console.log(appRef.current)
          // appRef.current.focus()
          // appRef.current.style.backgroundColor = 'green'
          appRef.current.f()
        }}
      >
        点击让Test组件的input获得焦点
      </button>
    </div>
  )
}
